<template>
  <div class="common-layout">
    <el-container style="width: 1240px;height: 900px; background-color: white;">
      <el-main>
        <el-form>
            <el-form-item>
                <el-button size="small" @click="dialog(null)" type="success">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%;height: 700px;" border>
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" width="150" />
            <el-table-column prop="sex" label="性别" width="100" />
            <el-table-column prop="age" label="年龄" width="100" />
            <el-table-column prop="phone" label="联系方式" width="120" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="post" label="职位" width="120" />
            <el-table-column prop="state" label="状态" width="120" />
            <el-table-column prop="createTime" label="入职时间" width="150">
                <template v-slot="scope">
                    <el-text>{{ moment(scope.row.createTime).format("YYYY年MM月DD日") }}</el-text>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
                <template v-slot="scope">
                    <el-button link size="small" type="warning" @click="dialog(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
         style="margin-top: 20px;"
      v-model:current-page="page.index"
      v-model:page-size="page.size"
      :page-sizes="[15, 20, 25, 30]"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.count" />
      </el-main>
    </el-container>
  </div>
  <!-- 弹出框 -->
  <el-dialog v-model="logic.isopen" :title="logic.title" width="800" align-center draggable>
            <el-form label-width="100"> 
                <el-form-item label="用户名：">
                    <el-input v-model="form.name"/>
                </el-form-item>
            <el-form-item label="性别：">
                <el-radio-group v-model="form.sex">
                    <el-radio value="男">男</el-radio>
                    <el-radio value="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄：">
                <el-input v-model="form.age"/>
            </el-form-item>
            <el-form-item label="联系方式：">
                <el-input v-model="form.phone"/>
            </el-form-item>
            <el-form-item label="所属部门：">
                <el-radio-group v-model="form.department">
                    <el-radio value="IT信息部">IT信息部</el-radio>
                    <el-radio value="人力资源部">人力资源部</el-radio>
                    <el-radio value="财务部">财务部</el-radio>
                    <el-radio value="销售部">销售部</el-radio>
                    <el-radio value="行政部">行政部</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="职位：">
                <el-radio-group v-model="form.post">
                    <el-radio value="董事长">董事长</el-radio>
                    <el-radio value="CEO">CEO</el-radio>
                    <el-radio value="秘书">秘书</el-radio>
                    <el-radio value="总经理">总经理</el-radio>
                    <el-radio value="主管">主管</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="状态：">
                <el-radio-group v-model="form.state">
                    <el-radio value="在岗">在岗</el-radio>
                    <el-radio value="外出">外出</el-radio>
                    <el-radio value="请假">请假</el-radio>
                    <el-radio value="调休">调休</el-radio>
                    <el-radio value="停职">停职</el-radio>
                </el-radio-group>
            </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button round @click="logic.isopen = false">取消</el-button>
                    <el-button round type="primary" @click="save">保存</el-button>
                </div>
            </template>
        </el-dialog>
</template>
<script lang="ts" setup>
import { ref,reactive,onMounted, watch } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { read } from '../../stores/host'
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus';
//弹出框
const dialog=(row:any)=>{
    logic.isopen=true;
    if(row==null)
    {
        logic.title="新增"
        logic.isadd=true

        form.id=0
        form.name=""
        form.sex=""
        form.age= ""
        form.phone= ""
        form.department= ""
        form.post= ""
        form.state= ""
    }
    else
    {
        logic.title="修改"
        logic.isadd=false

        form.id=row.id
        form.name=row.name
        form.sex=row.sex
        form.age= row.age
        form.phone= row.phone
        form.department= row.department
        form.post= row.post
        form.state= row.state
    }
}
const delid=reactive({
    id:0,
    deleteId:0
})
//删除
const del=(id:any)=>{
    ElMessageBox.confirm(
    '您确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        delid.id = id
        read.post("/subscribewrite/api/Management/DeleteStaff",delid).then(res=>{
            if(res.data.code == 100)
            {
                ElMessage.success("删除成功");
                show();
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
//弹出框的保存
const save=()=>{
    if(form.age == null || form.age == "")
    {
        ElMessage.error("年龄不能为空");
        return;
    }
    if(form.age * 0 != 0 || form.age <= 20 || form.age % 1 != 0)
    {
        ElMessage.error("年龄必须为数字切必须大于20岁！！！");
        return;
    }
    if(form.department == null || form.department == "")
    {
        ElMessage.error("部门不能为空");
        return;
    }
    if(form.post == null || form.post == "")
    {
        ElMessage.error("职位不能为空");
        return;
    }
    if(form.state == null || form.state == "")
    {
        ElMessage.error("状态不能为空");
        return;
    }
    if(logic.isadd)
    {
        read.post("/subscribewrite/api/Management/CreateStaff",form).then(res=>{
            if(res.data.code==100)
            {
                ElMessage.success("添加成功")
                show()
                logic.isopen=false
            }
            else
            {
                ElMessage.error(res.data.message)
            }
        })
    }
    else
    {
        read.post("/subscribewrite/api/Management/UpdateStaff",form).then(res=>{
            if(res.data.code==100)
            {
                ElMessage.success("修改成功")
                show()
                logic.isopen=false
            }
            else
            {
                ElMessage.error(res.data.message)
                logic.isopen=false
            }
        })
    }
}
//参数
const form:any = reactive({
  id: 0,
  name: "",
  sex: "",
  age: null,
  phone: "",
  department: "",
  post: "",
  state: "",
  createId: 0
})
//弹出框参数
const logic=reactive({
    isopen:false,
    title:"",
    isadd:false
})
const option = reactive({
    name:"",
    department:"",
    post:"",
})
const page = reactive({
    index:1,
    size:15,
    count:0,
    page:0
})
const show=()=>{
    read.get("/subscriberead/api/Management/ShowStaff",{params:{
        name:option.name,
        department:option.department,
        post:option.post,
        index:page.index,
        size:page.size
    }}).then(res=>{
        if(res.data.code == 100)
        {
            tableData.value = res.data.data.data
            page.count = res.data.data.totalCount
            page.page = res.data.data.totalPagingt
        }
        else
        {
            ElMessage.error(res.data.message);
        }
    })
}
onMounted(()=>{
    show()
})
const tableData = ref([])
watch(page, () => {
    show();
});
const clean = ()=>{
    option.name="",
    option.department="",
    option.post=""
    show()
}
</script>
